<template>
	<view class="content">
		<view class="top">
			<view class="top-for" style="color: black;" v-for="(item, index) in ['综合', '价格', '上新']">
				<text @click="zonghe(item)">{{ item }}</text>
				<view>
					<u-icon v-if="item!=='综合'" name="arrow-up-fill" size="7" @click="up(item)"></u-icon>
					<u-icon v-if="item!=='综合'" name="arrow-down-fill" size="7" @click="down(item)"></u-icon>
				</view>
			</view>
		</view>

		<view class="bootom" v-if="imgList.length">
			<view class="hot-imgs" v-for="(item, index) in imgList" @tap="imgUrl(item.id)">
				<image :src="url2+item.mainImage" mode="aspectFill"></image>
				<view class="img-text">
					<text class="hot-text-name">
						<!-- <text class="tag" style="margin-right: 10rpx">全新</text> -->
						{{ item.description }}
					</text>

					<view class="numberDate">
						<text style="font-weight: bold; font-size: 35rpx">￥{{ cut(item, true) }}</text>
						<text>{{ cut(item, false) ? ('.' + cut(item, false)) : '' }}/天</text>
						<text style="margin-left: 10rpx; color: #000">{{ item.minTenancy || 365 }}天起租</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="emp">
			<u-empty mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	import main from '@/api/main.js';
	import {
		numberCut
	} from '@/utils/index.js';
	import {
		baseUrl
	} from "../../config.js"
	export default {

		data() {
			return {
				imgList: [],
				url2: ""
			};
		},
		onLoad(e) {
			if (e.id) {
				this.getClassifyIdList(e.id);
			}
		},
		methods: {
			imgUrl(id) {
				uni.navigateTo({
					url: '/subPages/main/commodity?id=' + id
				});
			},
			up(item) {
				switch (item) {
					case "价格":
						this.imgList = this.imgList.sort((a, b) => b.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice - a
							.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice);
						break;
					case '上新':
						this.imgList = this.imgList.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
						break;
				}
			},
			down(item) {
				switch (item) {
					case "价格":
						this.imgList = this.imgList.sort((a, b) => a.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice - b
							.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice);
						break;
					case '上新':
						this.imgList = this.imgList.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
						break;
				}
			},
			getClassifyIdList(id) {
				main.getList({
						classifyId: id
					})
					.then((data) => {
						this.imgList = data.rows;
					})
					.catch((erro) => {
						console.log(erro);
					});
			},
			zonghe(item){
				    if(item!='综合') return
				    this.imgList.sort(() => Math.random() - 0.5);
				
			},
			cut(row, bool) {
				let number;
				if (!row.leaseGoodSkus) {
					number = 0;
				} else if (!row.leaseGoodSkus[0].leaseRentalRules) {
					number = 0;
				} else {
					number = row.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice;
				}

				return numberCut(number || 12.23, bool);
			}
		},
		mounted() {
			this.url2 = baseUrl
		}
	};
</script>

<style lang="scss" scoped>
	.top {
		height: 40rpx;
		width: 100%;
		padding-top: 50rpx;
		display: flex;
		justify-content: space-between;

		.top-for {
			margin: 0 25rpx;
			display: flex;
			align-items: center;

			text {
				margin-right: 5rpx;
			}
		}
	}

	.bootom {
		margin: 30rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.hot-imgs {
			margin: 20rpx 0;
			border-radius: 20rpx;
			width: 330rpx;
			height: 400rpx;
			background-color: #fff;

			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				margin: 30rpx;
				width: 250rpx;
				height: 250rpx;
			}

			.img-text {
				margin: 0 20rpx;

				.hot-text-name {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					/* 限制为两行 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					/* 允许文本换行 */
				}

				.numberDate {
					color: red;
					font-size: 25rpx;
				}
			}
		}
	}
</style>